import React from "react";
import Taro from "@tarojs/taro";
import http from "../../../../utils/http";
import "./index.less";

import { View } from "@tarojs/components";
import { AtProgress, AtCard, AtButton } from "taro-ui";

class Exam extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      learningProcess: 0
    };
  }

  /* 获取项目学习进度 */
  getLearningProcess = async () => {
    const { id: join_train_id } = Taro.getCurrentInstance().router.params;
    const { id: user_id } = JSON.parse(Taro.getStorageSync("userInfo") || "{}");
    const { data: res } = await http({
      url: "/implement/getLearningProcess",
      data: {
        join_train_id,
        user_id
      }
    });
    if (res.error !== 0) return;
    this.setState({ learningProcess: res.data.learning_process });
  };
  /* 去考试 */
  toTest = () => {
    const { id: join_train_id } = Taro.getCurrentInstance().router.params;
    const { id: user_id } = JSON.parse(Taro.getStorageSync("userInfo") || "{}");
    Taro.navigateTo({ url: `/pages/study/test/index?user_id=${user_id}&join_train_id=${join_train_id}` });
  };

  /* 挂载时 */
  componentDidMount() {
    this.getLearningProcess();
  }

  render() {
    return (
      <View className="exam_box">
        <View className="h3">学习进度</View>
        <AtProgress percent={this.state.learningProcess} />
        <AtButton
          className="btn"
          type="primary"
          onClick={this.toTest}
          disabled={this.state.learningProcess !== 100}
        >
          开始考试
        </AtButton>
        <AtCard
          note='TEST REQUIREMENTS'
          extra='考试要求'
          title='提示'
          thumb='https://www.hualigs.cn/image/61284abf05dfb.jpg'
          isFull
        >
          <View>请认真学习！你需要学完项目的所有课程才能进行考试哦，低于80分不能通过考试，需要重考。</View>
        </AtCard>
      </View>
    );
  }
}

export default Exam;
